<template>
  <div class="login">
    <form
      action="#"
    >
      <div class="username">
        <div>
          <label for="username"><span>账号:</span></label>
          <input
            maxlength="20"
            type="text"
            placeholder="请输入邮箱"
            id="username"
            name="username"
            v-validate ="'required|username'"
            v-model="user.username"
          >
        </div>
        <span
          class="error-info error-username"
          v-show="errors.has('username')"
        >
          {{ errors.first("username") }}
        </span>
      </div>
      <div class="password">
        <div>
          <label for="password"><span>密码:</span></label>
          <input
            maxlength="14"
            type="password"
            placeholder="请输入密码"
            id="password"
            name="password"
            v-validate ="'required|password'"
            v-model="user.password"
          >
        </div>
        <span
          class="error-info error-username"
          v-show="errors.has('password')"
        >
          {{ errors.first("password") }}
        </span>
      </div>
      <div class="check-code">
        <div>
          <label for="checkCode"><span>验证码:</span></label>
          <input
            maxlength="4"
            type="text"
            placeholder="请输入验证码"
            id="checkCode"
            name="checkCode"
            v-validate ="{required : true , checkCode : 'nzq'}"
            v-model="user.checkCode"
          >
    <!--      {{user.checkCode}}-->
          <a
            class="get-check-code"
            @click="drawCanvas"
          >获取验证码</a>
        </div>
        <span
          class="error-info error-username"
          v-show="errors.has('checkCode')"
        >
          {{ errors.first("checkCode")}}
        </span>
        <canvas
          ref="canvas"
          width="0"
          height="0"
          @click="drawCanvas"
        ></canvas>
      </div>
      <button type="button" @click="submit">登录</button>
      <div class="user-prompt">
        <p>还没有账号?&nbsp;&nbsp;<span class="user-prompt-color"  @click="$emit('switch', 'register')">注册</span></p>
        <a
          href="resetPassword.html"
          class="user-prompt-color"
        >忘记密码</a>
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        user : {
          username : "",
          password : ""
        },
        checkCode : 'nzq'
      }
    },
    methods: {
      //生成随机数
      randomNum : function (min,max){
        return Math.floor(Math.random()*(max-min)+min);
      },
      //生成随机颜色RGB分量
      randomColor : function randomColor(min,max){
        let _r = this.randomNum(min,max);
        let _g = this.randomNum(min,max);
        let _b = this.randomNum(min,max);
        return "rgb("+_r+","+_g+","+_b+")";
      },
      // 画 canvas
      drawCanvas : function (){
        //获取到元素canvas
        let $canvas = this.$refs.canvas;
        $canvas.width = 80;
        $canvas.height = 40;
        let _str = "0123456789";//设置随机数库
        let _picTxt = "";//随机数
        let _num = 4;//4个随机数字
        let _width = $canvas.width;
        let _height = $canvas.height;
        let ctx = $canvas.getContext("2d");//获取 context 对象
        ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐  文字关于高度所在位置
        ctx.fillStyle = this.randomColor(180,240);//填充画布颜色
        ctx.fillRect(0,0,_width,_height);//填充矩形--画画
        //  数字
        for(let i=0; i<_num; i++){
          let x = (_width-10)/_num*i+10;
          let y = this.randomNum(_height/2,_height);
          let deg = this.randomNum(-45,45);
          let txt = _str[this.randomNum(0,_str.length)];
          _picTxt += txt;//获取一个随机数
          ctx.fillStyle = this.randomColor(10,100);//填充随机颜色
          ctx.font = this.randomNum(16,40)+"px SimHei";//设置随机数大小，字体为SimHei
          ctx.translate(x,y);//将当前xy坐标作为原始坐标  translate，移动起始位置
          ctx.rotate(Math.PI*deg/180);
          ctx.fillText(txt, 0,0);//绘制填色的文本  相对translate所移动的位置
          ctx.rotate(-Math.PI*deg/180);
          ctx.translate(-x,-y);
        }
        // 线
        for(let i=0; i<_num; i++){
          //定义笔触颜色
          ctx.strokeStyle = this.randomColor(90,180);
          ctx.beginPath();
          //随机划线--4条路径
          ctx.moveTo(this.randomNum(0,_width), this.randomNum(0,_height));
          ctx.lineTo(this.randomNum(0,_width), this.randomNum(0,_height));
          ctx.stroke();
        }
        // 圆
        for(let i=0; i<_num*10; i++){
          ctx.fillStyle = this.randomColor(0,255);
          ctx.beginPath();
          //随机画圆，填充颜色
          ctx.arc(this.randomNum(0,_width),this.randomNum(0,_height), 1, 0, 2*Math.PI);
          ctx.fill();
        }
        this.checkCode = _picTxt;
        return _picTxt;//返回随机数字符串
      },
      // 表单提交的时候验证
      submit : function () {
        let that = this;
        this.$validator.validateAll().then((result)=>{
          if(!result){
            that.$emit('login');
            that.$emit('close');
          }
        })
      },
      getCheckCode : function () {
        this.$options.methods.drawCanvas();
      }
    }
  }
</script>

<style scoped>
  @import '../../../../../../assets/css/loginRegister.css';
  .check-code {
    overflow: hidden;
  }
  .check-code>span {
    float: left;
    margin-bottom: 20px;
  }
  .check-code>canvas {
    float: right;
  }
  canvas:hover {
    cursor: pointer;
  }
</style>
